004_1レスポンシブ対応にする
以下覚え書き
cssの切り替え方法
■ひとつの style.css の中にまとめて記述して「PC用」「タブレット用」「スマホ用」を切り替える方法と、 「style.css（PC用）」「style_tablet.css（タブレット用）」「style_smart.css（スマホ用）」の3つの cssファイルを作って切り替える方法、とがありますが、
修正のしやすさ、メンテナンスの使い勝手を考えるなら、後者の3つのcssファイルを作る方がいいと思う。
画面サイズ
・PC (横幅：960px)
・iPhone 4 / 4S (縦：640×960 横：960×640)
・iPad (縦：768×1024px 横：1024×768px)
外部CSS記述（3つのcssを作り、振り分けて記述、それを読み込ませる）
（header.phpの中に記述）
<!--PC用CSS--> <link rel="stylesheet" media="screen and (min-width: 769px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"> <!--タブレット用CSS--> <link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_tablet.css"> <!--スマホ用CSS--> <link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_smart.css">
※以前は、絶対パスでCSSのURLを入れていましたが、引越しすると直さなければならなくなるので、phpで読み込む形に変更。
※PC用CSS＝style.css
※タブレット用CSS＝style_tablet.css
※スマホ用CSS＝style_smart.css と3種類のcssファイルを用意します。
画像を自動伸縮（各style.css）
デバイスに合わせてヘッダ画像などは伸び縮みさせたいので、
3種のCSSファイルに共通事項として、
/* 画像を自動伸縮する */
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
を入れます。
※ヘッダーのタイトル画像を背景固定にしている場合、自動伸縮しないので、通常のimg srcに切り替えます。
スマホでズームさせたいいかどうか（header.php）
header.phpのヘッダー部分に下記を記述します。
<!DOCTYPE html> <html> <head> <!-- スマホ ズームさせない場合 --> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <!-- スマホ ズームさせる場合 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
レスポンシブ、その他の調整
その他の細かい設定は、テーマの内容によっても変わってくるので、随時確認しながら変えていく形です。
その他、追記したものメモ
各CSSの
/**********************************************************
基本body
**********************************************************/
に下記を追加
↓
overflow-x:hidden; /* 横のスクロールバーを消す */ -webkit-text-size-adjust: 100%; /* スマホ用 */
■チェックツール
www.responsinator.com
■最後にGoogleモバイル フレンドリーでチェック。
Googleモバイル フレンドリーテスト